Customization Defaults

Defaults

Enables you to set styles and other customizations for the dependent components.

defaults: {
 customStyles:{
 button: { 'color': '#200606' } 
 }
} 

The following options are available for fontFamily properties.

• 'Inter, serif'
• 'Roboto, sans-serif'
• 'Georgia, serif'
• 'Palatino Linotype, Book Antiqua, Palatino, serif'
• 'Times New Roman, Times, serif'
• 'Arial, Helvetica, sans-serif'
• 'Arial Black, Gadget, sans-serif'
• 'Comic Sans MS, cursive, sans-serif'
• 'Impact, Charcoal, sans-serif'
• 'Lucida Sans Unicode, Lucida Grande, sans-serif'
• 'Tahoma, Geneva, sans-serif'
• 'Trebuchet MS, Helvetica, sans-serif'
• 'Verdana, Geneva, sans-serif'
• 'Courier New, Courier, monospace'
• 'Lucida Console, Monaco, monospace'

The following options are available for defaultValidator and validators properties.

• EQUALS
• NOT_EQUAL
• CONTAINS
• NOT_CONTAIN
• ENDS_WITH
• NOT_END_WITH
• STARTS_WITH
• NOT_START_WITH
• BETWEEN_INCLUSIVE
• BETWEEN_EXCLUSIVE
• LESS_THAN
• LESS_THAN_EQUAL
• GREATER_THAN
• GREATER_THAN_EQUAL
• IS_NULL
• IS_NOT_NULL
• BEFORE
• AFTER
• BEFORE_ON
• AFTER_ON
• IN

List Properties

View	Property	Type	Description	Example
list	assetListViewMode	string	Defines the default view mode for the asset list.	"card" or "table"

Text Properties

View	Property	Type	Description	Example
design	customStyles.text.alignText	string	Default align text for the text element.	"left", "center", "right", or "justify"
design	customStyles.text.backgroundColor	string	Default background color.	'#000000', 'green', 'GREEN'
design	customStyles.text.borderColor	string	Default border color for the text element.	'#000000', 'green', 'GREEN'
design	customStyles.text.borderStyle	string	Default border style.	"solid", "dotted", "dashed", or "double"
design	customStyles.text.borderWidth	string	Default border width. Any value between 1-20 pixels	"20px"
design	customStyles.text.fontColor	string	Default font color for the text element	'#000000', 'green', 'GREEN'
design	customStyles.text.fontFamily	string	Default font for the text element.	'Lucida Console, Monaco, monospace'
design	customStyles.text.fontSize	string	Default font size for the text element. Choose from 8, 9, 10, 11, 12, 14, 15, 16, 18, 24, 30, 36, 48, 60, 72, or 96 pixels.	"96px"
design	customStyles.text.fontStyle	boolean	Default font style for the text element (italic styling).	true
design	customStyles.text.fontWeight	boolean	Default font weight for the text element (bold styling).	true
design	customStyles.text.paddingBottom	number	Default padding bottom for the text element.	"20px"
design	customStyles.text.paddingLeft	number	Default padding left for the text element.	"20px"
design	customStyles.text.paddingRight	number	Default padding right for the text element.	"20px"
design	customStyles.text.paddingTop	number	Default padding top for the text element.	"20px"
design	customStyles.text.strike	boolean	Default strike for the text element.	true
design	customStyles.text.underline	boolean	Default underline for the text element.	true

Image Properties

View	Property	Type	Description	Example
design	customStyles.image.aspect	string	Default aspect for image.	"contain", "cover", or "fill"

Button Properties

View	Property	Type	Description	Example
design	customStyles.button.background	string	Button background color.	'#000000', 'green', 'GREEN'
design	customStyles.button.color	string	Button font color.	'#000000', 'green', 'GREEN'
design	customStyles.button.fontFamily	string	Button font family.	'Lucida Console, Monaco, monospace'
design	customStyles.button.fontSize	string	Button font size. Choose from 8, 9, 10, 11, 12, 14, 15, 16, 18, 24, 30, 36, 48, 60, 72, or 96 pixels.	"96px"
design	customStyles.button.label	string	Text for the element.	"text"
design	customStyles.button.url	string	URL for the button select event.	"www.any-example-url.com"

Header Properties

View	Property	Type	Description	Example
design	customStyles.header.layoutWidth	string	Width of the header.	"screen" or "canvas"
design	customStyles.header.backgroundColor	string	Background color for the header.	'#000000', 'green', 'GREEN'
design	customStyles.header.height	string	Default header size. Value should be between 10-300.	"12"
design	customStyles.header.backgroundImageConfig.aspect	string	Default aspect for header background image.	"contain", "cover" or "fill"
design	customStyles.header.backgroundImageConfig.image	string	Background image for the header.	"www.any-example-url.xxx"

Container Properties

View	Property	Type	Description	Example
design	customStyles.container.backgroundAspect	string	Sets the size of the element's background image.	"contain", "cover" or "fill"
design	customStyles.container.backgroundColor	string	Background color of the container (color names or hex).	'#000000', 'green', 'GREEN'
design	customStyles.container.borderColor	string	Border color of the container (color names or hex).	'#000000', 'green', 'GREEN'
design	customStyles.container.borderRadius	number	Number to round the corners of the container outer border edges.	-
design	customStyles.container.borderStyle	string	Style to visualize the border.	"none", "solid" or "dotted"
design	customStyles.container.borderWidth	number	Width of the border style.	-
design	customStyles.container.backgroundImageURL	string	Background image for the container.	Valid image URL

Tab Properties

View	Property	Type	Description	Example
design	customStyles.tab.backgroundColor	string	Tabs indicator color.	'#000000', 'green', 'GREEN'
design	customStyles.tab.border	string	Tabs border color.	'#000000', 'green', 'GREEN'
design	customStyles.tab.fontColor	string	Tabs font color.	'#000000', 'green', 'GREEN'
design	customStyles.tab.fontSize	string	Tabs font size.	'8px', '24px'
design	customStyles.tab.fontType	string	Tabs font type.	'Lucida Console, Monaco, monospace'
design	customStyles.tab.generalSize	string	Default size for tabs	"20px"
design	customStyles.tab.name	string	Label for the name of a new tab.	"My example new label"
design	customStyles.tab.selectorColor	string	Selected tab indicator color.	Examples: '#000000', 'green', 'GREEN'
design	customStyles.tab.widthType	string	Tabs definition for width type.	"MANUAL", "AUTOMATIC", or "SAME_SIZE"

Input Box Properties

View	Property	Type	Description	Example
design	customStyles.filterCtrlInputBox.backgroundColor	string	Background color for the filter control (color names or hex value).	'#000000', 'green', 'GREEN'
design	customStyles.filterCtrlInputBox.borderColor	string	Border color for the filter control (color names or hex value).	'#000000', 'green', 'GREEN'
design	customStyles.filterCtrlInputBox.buttonBackgroundColor	string	Background color of the apply filter button in the filter control (color names or hex value).	'#000000', 'green', 'GREEN'
design	customStyles.filterCtrlInputBox.buttonBorderColor	string	Border color of the apply filter button in the filter control (color names or hex value).	'#000000', 'green', 'GREEN'
design	customStyles.filterCtrlInputBox.buttonTextColor	string	Text color of the apply filter button in the filter control (color names or hex value).	'#000000', 'green', 'GREEN'
design	customStyles.filterCtrlInputBox.columns	Array	An array of columns where the filter is applied.	[{ "columnId": "xxxxx", "datasetId": "datasetxxx"}]
design	customStyles.filterCtrlInputBox.defaultGrouping	string	Date Grouping selected by the user in interaction mode. To apply this default, select a column using the “columns” field. If no column is selected through customization, the default is loaded based on the column’s data type. You also have to select a list of valid groupings.	'day', 'month', 'year'
design	customStyles.filterCtrlInputBox.defaultValidator	Object	Default validator selected for the filter control. To apply this default, select a column using the “columns” field. If no column is selected through customization, the default is loaded based on the column’s data type. You also have to select a list of valid validators. The value of validator should be one of the strings from the list above.	'CONTAINS'
design	customStyles.filterCtrlInputBox.fontColor	string	Font color for the filter control label (title) (color names or hex value).	'#000000', 'green', 'GREEN'
design	customStyles.filterCtrlInputBox.fontFamily	string	List of font types for the filter control.	'Roboto, sans-serif', 'Arial, Helvetica, sans-serif', 'Lucida Console, Monaco, monospace'
design	customStyles.filterCtrlInputBox.groupings	Array	Date Grouping list. To apply this default, select a column using the “columns” field. If no column is selected through customization, the default is loaded based on the column’s data type.	["day","month","quarter","week","year","quarter_only","month_only","day_only"]
design	customStyles.filterCtrlInputBox.hint	string	Placeholder text for the filter field.	'Enter a value...'
design	customStyles.filterCtrlInputBox.selectorColor	string	Color of the selector checkbox (color names or hex value).	'#000000', 'green', 'GREEN'
design	customStyles.filterCtrlInputBox.title	string	Name definition in the filter control, which can be a column name or any text from the panel configuration.	Example: 'Column name'
design	customStyles.filterCtrlInputBox.trigger	string	Displays the Apply Filter button or operates automatically. Two specific values: 'BUTTON' or 'AUTOMATIC'.	'AUTOMATIC'
design	customStyles.filterCtrlInputBox.triggerButtonLabel	string	Label to display text on the apply filter button. Any text string.	'Filter'
design	customStyles.filterCtrlInputBox.validators	string[]	Object for the validators/operators list. To apply this default, select a column using the “columns” field. If no column is selected through customization, the default is loaded based on the column’s data type. The value of validator should be one of the strings from the list above.	["EQUALS","NOT_EQUAL"]

Multiselect List Properties

View	Property	Type	Description	Example
design	customStyles.filterCtrlMultiSelectList.backgroundColor	string	Default background color for filter control.	'#000000', 'green', 'GREEN'
design	customStyles.filterCtrlMultiSelectList.borderColor	string	Border color for the filter control.	'#000000', 'green', 'GREEN'
design	customStyles.filterCtrlMultiSelectList.buttonBackgroundColor	string	Default background color for filter buttons.	'#000000', 'green', 'GREEN'
design	customStyles.filterCtrlMultiSelectList.buttonBorderColor	string	Default border color for filter buttons.	'#000000', 'green', 'GREEN'
design	customStyles.filterCtrlMultiSelectList.buttonTextColor	string	Default text color for filter buttons.	'#000000', 'green', 'GREEN'
design	customStyles.filterCtrlMultiSelectList.columns	Array	An array of columns where the filter is applied. This default requires the fields sourceDataDataset, sourceDataDisplayColumn, and sourceDataValueColumn to be provided through customization to load the data associated.	[{ "columnId": "xxxxx", "datasetId": "datasetxxx"}]
design	customStyles.filterCtrlMultiSelectList.defaultValidator	string	Default validator/operator to load. The value of validator should be one of the strings from the list above.	'EQUALS', 'NOT_EQUAL'
design	customStyles.filterCtrlMultiSelectList.fontColor	string	Default font color for the filter control label (title).	'#000000', 'green', 'GREEN'
design	customStyles.filterCtrlMultiSelectList.fontFamily	string	List of font types for filter control.	'Lucida Console, Monaco, monospace'
design	customStyles.filterCtrlMultiSelectList.hint	string	Default placeholder for the input field.	"any string text"
design	customStyles.filterCtrlMultiSelectList.selectorColor	string	Default color for the selector checkbox.	'#000000', 'green', 'GREEN'
design	customStyles.filterCtrlMultiSelectList.sourceDataDataset	string	ID of the dataset used for sourceDataDisplayColumn and sourceDataValueColumn properties. Required if columns is defined.	"datasetxxx"
design	customStyles.filterCtrlMultiSelectList.sourceDataDisplayColumn	string	Column ID whose values are shown as display labels in the filter control. Required if columns is defined.	"displayColumnId"
design	customStyles.filterCtrlMultiSelectList.sourceDataValueColumn	string	Column ID whose values are used as the actual filter values. Required if columns is defined.	"valueColumnId"
design	customStyles.filterCtrlMultiSelectList.title	string	Defines the name in the filter control, which can be a column name or any text from the panel configuration.	"Column name"
design	customStyles.filterCtrlMultiSelectList.trigger	string	Displays the Apply Filter button or operates automatically. Two specific values: 'BUTTON' or 'AUTOMATIC'.	'BUTTON'
design	customStyles.filterCtrlMultiSelectList.triggerButtonLabel	string	Label to display the text on the apply filter button	"My Label"
design	customStyles.filterCtrlMultiSelectList.type	string	Groups of values.	'LIST', 'DROPDOWN'
design	customStyles.filterCtrlMultiSelectList.validators	string[]	Object to list the validators/operators. The value of validator should be one of the strings from the list above.	['EQUALS', 'NOT_EQUAL']

Date Picker Properties

View	Property	Type	Description	Example
design	customStyles.filterCtrlDatePicker.backgroundColor	string	Background color for the filter control (color names or hex value).	'#000000', 'green', 'GREEN'
design	customStyles.filterCtrlDatePicker.borderColor	string	Border color for the filter control (color names or hex value).	'#000000', 'green', 'GREEN'
design	customStyles.filterCtrlDatePicker.buttonBackgroundColor	string	Background color for the apply filter button (color names or hex value).	'#000000', 'green', 'GREEN'
design	customStyles.filterCtrlDatePicker.buttonBorderColor	string	Border color for the filter button (color names or hex value).	'#000000', 'green', 'GREEN'
design	customStyles.filterCtrlDatePicker.buttonTextColor	string	Text color for the filter button (color names or hex value).	'#000000', 'green', 'GREEN'
design	customStyles.filterCtrlDatePicker.columns	Array	An array of columns where the filter is applied. The data type of the columns should be date; otherwise, the column is not valid for filtering.	[{ "columnId": "xxxxx", "datasetId": "datasetxxx"}]
design	customStyles.filterCtrlDatePicker.defaultValidator	Object	Default validator/operator to load. Only date-related validators are valid. The value of validator should be one of the strings from the list above.	'AFTER'
design	customStyles.filterCtrlDatePicker.fontColor	string	Default font color for the filter control label (title) (color names or hex value).	'#000000', 'green', 'GREEN'
design	customStyles.filterCtrlDatePicker.fontFamily	string	List of font types for the filter control.	'Roboto, sans-serif', 'Arial Black, Gadget, sans-serif', 'Lucida Console, Monaco, monospace'
design	customStyles.filterCtrlDatePicker.hint	string	Default placeholder text for the filter control.	'Enter a date...'
design	customStyles.filterCtrlDatePicker.selectorColor	string	Color of the selector checkbox (color names or hex value).	'#000000', 'green', 'GREEN'
design	customStyles.filterCtrlDatePicker.title	string	Default name for the filter control.	'Column name'
design	customStyles.filterCtrlDatePicker.trigger	string	Default trigger action, either with a button or automatic mode (on blur).	'BUTTON', 'AUTOMATIC'
design	customStyles.filterCtrlDatePicker.triggerButtonLabel	string	Default text for the Apply Filter button.	'Filter'
design	customStyles.filterCtrlDatePicker.validators	string[]	Object to list the validators/operators. To apply this default, select a column using the “columns” field. If no column is selected through customization, the default is loaded based on the column’s data type. The value of validator should be one of the strings from the list above.	["EQUALS","AFTER"]

Filter Panel Properties

View	Property	Type	Description	Example
design, preview, enduser	filterPanel.defaultView	string	Sets the default state of the filter panel.	"expanded" or "collapsed"
design, preview, enduser	filterPanel.displayIcon	Boolean	Sets the default visibility of the icon option in the filter panel settings.	-
design, preview, enduser	filterPanel.displayColor	Boolean	Sets the default visibility of the color option in the filter panel settings.	-

End User View Properties

View	Property	Type	Description
enduser	endUser.defaults.dragElement	Boolean	Controls dragging elements in the Interact Mode of the dashboard. Default is true.
enduser	endUser.defaults.resizeElement	Boolean	Controls resizing elements in the Interact Mode of the dashboard. Default is true.
enduser	endUser.defaults.removeElement	Boolean	Controls removing elements in the Interact Mode of the dashboard. Default is true.

Code Sample

customization: {
  views: {
    endUser: {
      defaults: {
        dragElement: false,
        resizeElement: false,
        removeElement: false
      }
    }
  }
}